<template>
   <div class="nav-box">
      <div class="left">
        <span class="triangle"></span>
        
      </div>
      <div class="right"></div>
      <span class="text">{{title}}</span>
  </div>
</template>
<script setup>
  import { defineProps, ref, watch } from 'vue'
  const props = defineProps({
    text: {
        type: String,
        required: false,
        default: "",
    }
  })
  const title = ref(props.text)
  watch(() => props.text, (newVal) => {
    title.value = newVal
  })
</script>
<style lang="scss" scoped>
  .nav-box {
    position: relative;
    height: 50px;
    // width: 100%;
    border-left: 5px solid #4C98FF;
    color: #fff;
    display: flex;
    align-items: center;
    z-index:11;
    .left{
      height: 100%;
      width: 0;
      display: flex;
      align-items: center;
    }
    .right{
      width: 100%;
      height: 100%;
      background: #276CC9;
      opacity: 0.2;
      position: relative;
    }
    .text{
      position: absolute;
      left: 35px;
      top: 50%;
      transform: translateY(-50%);
      color: #fff;
      font-size: 26px;
      opacity: 0.7;
      font-weight: bold;
    }
    .triangle {
      margin-left:10px;
      display: inline-block;
      width: 0;
      height: 0;
      border-left: 8px solid transparent;
      border-right: 8px solid transparent;
      border-bottom: 10px solid #4C98FF; /* 蓝色背景 */
      transform: rotate(90deg); /* 向右旋转90度 */
      z-index: 111;
    }
  }
</style>